// useEventListener是一个自定义组合函数，它在组件生命周期内自动给某个 DOM 元素添加事件监听器，
// 并在组件卸载前移除监听器，支持 ref 和普通 DOM 对象。

import {watch ,isRef, type Ref, onMounted, onBeforeMount, unref } from "vue";

const useEventListener = function(
  target: Ref<EventTarget | null> | EventTarget,  //可以是 ref，也可以是 DOM 对象
  event: string,                                  // 事件名称，比如 'click'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  handler: (e:Event)=>any                         // 事件处理函数
){
  if(isRef(target)){
    watch(target,(value,oldValue)=>{
      oldValue?.removeEventListener(event,handler)
      value?.addEventListener(event,handler)
    })
  }else{
    onMounted(()=>{
      target.addEventListener(event, handler)
    })
  }

  onBeforeMount(()=>{
    // unref(target) 能拿到真实的 DOM，然后解绑事件
    unref(target)?.removeEventListener(event,handler)
  })
}
export default useEventListener